<!-- 底部按钮-样式为右下角对齐 -->
<template>
    <view 
        class="bottomRightBtn"
        :class="[isIOS.devAgent == 'iOS'?'iosH':'andH']"
        v-if="btnWord.length > 0"
    >
        <!-- 有计算值 -->
        <view class="countText" v-if="hasCountBtn">
            <text>{{ countText }}</text>
            <text class="number">{{ countNumber }}</text>
        </view>
        <!-- 按钮 -->
        <view class="allBtn">
            <m-button 
                class="btn"
                v-for="(item,index) in btnWord"
                :key="index"
                :btnText="item.text"
                :type="item.type || 'normal'"
                :level="item.level || 'one'"
                :width="item.width || 108"
                :height="item.height || 40"
                @handleBtn="handleBtns(item)"
            />
        </view>
    </view>
</template>

<script>
import mButton from '@/components/m-button/m-button.vue';
export default {
    components: { mButton },
    props: {
            // 按钮数组对象
            /*参数：op-编码, text-显示文字，level-按钮级别，type-按钮状态，width-按钮宽度，height-按钮高度*/ 
            btnWord: {
                type: Array,
                default: []
            },

            // 是否需要显示数值
            hasCountBtn: {
                type: Boolean,
                default: false
            },
            // 数值显示的文字
            countText: {
                type: String,
                default: ''
            },
            countNumber: {
                type: Number,
                default: 0
            }
    },
    data() {
        return {
            isIOS:uni.getStorageSync('requestHeader')
        }
    },
    methods: {
        handleBtns(item){
            if(item.type === 'disabled') return;
            this.$emit("fromFooterBtn", item);
        }
    }
}
</script>

<style lang="scss" scoped>
.bottomRightBtn{
    width: 100%;
    position: fixed;
    border-top: 2rpx solid #F2F2F7;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $color-white;
    padding-top: 24rpx;
    padding: 24rpx 40rpx 0;
    display: flex;
    justify-content: space-between;
    &.iosH{
      height: 196rpx; 
    }
    &.andH{
      height: 128rpx;
    }
}
.allBtn{
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.btn{
    margin-left: 24rpx;
}
.countText{
    font-size: 30rpx;
    color: $basis-solid-grey-08;
}
.number{
    color: $color-primary;
    font-weight: bold;
    font-size: 56rpx;
    margin-left: 16rpx;
    &::before{
        content: "￥ ";
        font-size: 34rpx;
    }
}
</style>